<template>
	<div>
		<div class="template" v-show="Loading">
			<div>
				<mt-spinner :type="3" :size="60"></mt-spinner>
			</div>
		</div>
		<header class="aui-header navigation">
			<div @click="retreat"><img src="../assets/rightbut.png"></div>
			<div>友惠</div>
			<div @click="seekon"><img src="../assets/seek.png"></div>
		</header>
		<!--分类-->
		<div class="menulist">
			<ul class="menulist-ul" :style="{width:len + 'rem'}">
				<li v-for="item in classify" @click="classifyon(item.name,item.codeid)" :class="codeid == item.codeid ?'on' :'samemenu-li'">{{item.name}}</li>
			</ul>
			<div class="more" @click="goodsclassifyon"><img src="../assets/images1/propup.png"></div>

		</div>
		<div class="goodsclassify" v-show='classifyshow'>
			<span v-for='item in classify' @click="classifyon(item.name,item.codeid)" :class="codeid == item.codeid ?'ons' :'goodsclassify_s'">{{item.name}}</span>
		</div>
		<div v-show='show' class="recommend">
			<!--轮播图-->
			<div class="banner">
				<mt-swipe :auto="4000">
					<mt-swipe-item v-for='item in banner'>
						<img :src="item.img" @click='banners(item.id,item.value,item.linkType)'>
					</mt-swipe-item>
				</mt-swipe>
			</div>

			<!--活动标题-->
			<div class="activityTitle">
				<div><img src="../assets/images1/aramimg.png">整点特卖</div>
				<div @click='specialgoods()'>下一场 > </div>
			</div>

			<!--整点特卖商品-->
			<div class="special">
				<div class="specialList" v-for='item in special' @click="yh(item.id)">
					<div class="specialImg"><img :src="item.mainImageUrl"></div>
					<div class="specialName">{{item.goodsName}}</div>
					<div class="specialPrice">
						<div>￥{{item.price}}</div>
						<div>￥{{item.conPrice}}</div>
					</div>
				</div>
			</div>
			<div class="examine" @click='specialgoods()'>查看全部特卖 > </div>

			<div class="activityTitle">
				<div><img src="../assets/images1/aramimg.png">今日爆品</div>
				<div @click="todayhot">查看全部 > </div>
			</div>

			<!--爆品-->
			<div class="hotD">
				<div class="hot" :style="{width:num + 'rem'}">
					<div class="hotlist" v-for='item in hot' @click="yh(item.id)">
						<div class="hotImg"><img :src="item.mainImageUrl"></div>
						<div class="hotName">
							<img src="../assets/baopin@2x.png"> {{item.goodsName}}
						</div>
						<div class="hotPrice">
							<div>￥{{item.price}} / </div>
							<div>降{{item.couponMoney}}</div>
						</div>
						<div class="cashPrice">￥{{item.conPrice}}</div>
						<div class="rob">已抢{{item.totalSales}}件</div>
					</div>
				</div>
			</div>

			<div class="handpick"><img src="../assets/jingxuan.png"></div>
			<!--精选-->

			<div class="jing">
				<ul v-infinite-scroll="loadMore" infinite-scroll-disabled="loading" infinite-scroll-distance="1">
					<li v-for="item in jing" @click="yh(item.id)">

						<div class="handpicklist">
							<div class="handpickImg">
								<img :src="item.mainImageUrl">
								<i class="yhSymbol" v-if="item.spuPlatform == 'yh'"></i>
							</div>
							<div class="handpickName">
								<img src="../assets/jingxaun.png"> {{item.goodsName}}
							</div>
							<div class="handpickPrice">
								<div>￥{{item.price}} / </div>
								<div>降{{item.couponMoney}}</div>
							</div>
							<div class="cashPrice">
								<div>￥{{item.conPrice}}</div>
								<div>以抢购{{item.totalSales}}件</div>
							</div>
							<div class="immediately">立即抢购</div>
						</div>
					</li>
				</ul>
			</div>

		</div>
		<div v-show="!show" class="classifyTitle">
			<div class="type">
				<div @click="synthesizeSorton">{{synthesizeSort}}<img src="../assets/images1/propup.png"></div>
				<div @click="salesvolumeSorton">{{salesvolumeSort}}<img src="../assets/images1/propup.png"></div>
				<div @click="redPacketSorton">{{redPacketSort}}<img src="../assets/images1/propup.png"></div>
			</div>

			<div class="sellType" v-show='synthesizeSortShow'>
				<div v-for='item in synthesizeSortList' @click="synthesizeSortListon(item.name,item.orderType)">{{item.name}}</div>
			</div>
			<div class="sellType" v-show='redPacketSortShow'>
				<div v-for='item in redPacketSortList' @click='redPacketSortListon(item.name,item.orderType)'>{{item.name}}</div>
			</div>
			<div class="sellType" v-show='salesvolume'>
				<div v-for='item in salesvolumeList' @click="salesvolumeListon(item.name,item.orderType)">{{item.name}}</div>
			</div>

			<div class="merchandise">
				<ul v-infinite-scroll="classifygoods" infinite-scroll-disabled="loadings" infinite-scroll-distance="10">
					<li v-for='item in goodsClassify'>
						<div class="commoditylist">
							<div class="commodityImg">
								<img :src="item.mainImageUrl">
								<i class="jdSymbol" v-if="item.spuPlatform == 'jd'"></i>
							</div>
							<div class="commodityname">
								<img src="../assets/jingxaun.png"> {{item.goodsName}}
							</div>
							<div class="commodityoriginal">
								<div>￥{{item.price}} / </div>
								<div>降{{item.couponMoney}}</div>
							</div>
							<div class="commoditycash">
								<div>￥{{item.conPrice}}</div>
								<div>以抢购{{item.totalSales}}件</div>
							</div>
							<div class="immediately">立即抢购</div>
						</div>
					</li>
				</ul>
			</div>
		</div>
	</div>
</template>

<script>
	import { Toast } from 'mint-ui';
	import { InfiniteScroll } from 'mint-ui';
	import { BaseUrl } from '../Baseurl/common.js';
	export default {
		data() {
			return {
				classifyshow: false,
				classify: [], //商品分类列表
				banner: [], //轮播列表
				special: [], //整点特卖
				hot: [], //爆品列表
				num: '',
				jing: [], //精选列表
				index: 0,
				indexx: 0,
				show: true,
				loadings: '',
				loading: '',
				goodsClassify: [], //分类商品
				keyword: '',
				//				goodsClassifyid:'',
				synthesizeSortShow: false,
				synthesizeSort: '综合排序',
				synthesizeSortList: [{
					name: '综合排序',
					orderType: ''
				}, {
					name: '价格由高到底',
					orderType: 'priceDesc'
				}, {
					name: '价格由底到高',
					orderType: 'priceAsc'
				}],
				redPacketSortShow: false,
				redPacketSort: '红包排序',
				redPacketSortList: [{
					name: '红包由高到底',
					orderType: 'couponMoneyDesc'
				}, {
					name: '红包由底到高',
					orderType: 'couponMoneyAsc'
				}],
				salesvolume: false,
				salesvolumeSort: '销量优先',
				salesvolumeList: [{
					name: '销量由高到低',
					orderType: 'totalSalesDesc'
				}, {
					name: '销量由低到高',
					orderType: 'totalSalesAsc'
				}],
				orderType: '', //分类模式
				len: '',
				Loading: true,
				codeid: '',
			}
		},
		created() {
			//商品列表
			var url = BaseUrl + 'goods/categorys?type=yh';
			this.Loading = true;
			this.$http.get(url).then(res => {
				//				console.log(res.data.data);
				if(res.data.code == '10000') {
					this.Loading = false;
					this.classify = res.data.data;
					//					this.goodsClassifyid = res.data.data[0].id;
					this.codeid = res.data.data[0].codeid;
					var len = res.data.data.length;
					this.len = len * 1.8;
				}
			}).catch(error => {
				this.Loading = false;
				Toast({
					message: "网络异常",
					position: 'middle',
					duration: 3000
				})
			})

			//轮播图
			var url = BaseUrl + 'market/banners?type=yh';
			this.Loading = true;
			this.$http.get(url).then(res => {
				//				console.log(res);
				if(res.data.code == '10000') {
					this.Loading = false;
					this.banner = res.data.data;
				}
			}).catch(error => {
				this.Loading = false;
				Toast({
					message: "网络异常",
					position: 'middle',
					duration: 3000
				})
			})

			//整点特卖
			var url = BaseUrl + 'goods/list?goodsType=special&type=yh';
			this.Loading = true;
			this.$http.get(url).then(res => {
				//				console.log(res.data.data.list);
				if(res.data.code == '10000') {
					this.Loading = false;
					this.special = res.data.data.list.slice(0, 6);
				}
			}).catch(error => {
				this.Loading = false;
				Toast({
					message: "网络异常",
					position: 'middle',
					duration: 3000
				})
			})

			//爆品
			var url = BaseUrl + 'goods/list?goodsType=hot&type=yh'
			this.Loading = true;
			this.$http.get(url).then(res => {
				//				console.log(res);
				if(res.data.code == '10000') {
					this.Loading = false;
					this.hot = res.data.data.list;
					var len = res.data.data.list.length;
					this.num = 3.2 * len;
				}
			}).catch(error => {
				this.Loading = false;
				Toast({
					message: "网络异常",
					position: 'middle',
					duration: 3000
				})
			})

		},
		methods: {
			//分类的显示隐藏
			goodsclassifyon: function() {
				this.classifyshow = !this.classifyshow
			},
			//导航退后
			retreat: function() {
				window.history.go(-1);
			},
			//搜索
			seekon: function() {
				var name = escape('友惠');
				var type = escape('yh');
				this.$router.push({
					path: '/seekgoods',
					query: {
						name: name,
						type: type
					}
				})
			},
			//综合排序
			synthesizeSorton: function() {
				this.synthesizeSortShow = !this.synthesizeSortShow;
			},
			//综合列表
			synthesizeSortListon: function(name, orderType) {
				this.synthesizeSortShow = !this.synthesizeSortShow;
				this.synthesizeSort = name;
				this.redPacketSort = '红包排序';
				this.orderType = orderType;
				this.indexx = 0;
				this.goodsClassify = [];
				this.Goods(this.indexx, this.orderType);
			},
			//红包排序
			redPacketSorton: function() {
				this.redPacketSortShow = !this.redPacketSortShow;
			},
			//红包列表
			redPacketSortListon: function(name, orderType) {
				this.redPacketSortShow = !this.redPacketSortShow;
				this.redPacketSort = name;
				this.synthesizeSort = '综合排序';
				this.orderType = orderType;
				this.indexx = 0;
				this.goodsClassify = [];
				this.Goods(this.indexx, this.orderType);
			},
			//销量排序
			salesvolumeSorton: function() {
				this.salesvolume = !this.salesvolume;
			},
			//销量
			salesvolumeListon: function(name, orderType) {
				this.salesvolume = !this.salesvolume;
				this.redPacketSort = name;
				this.orderType = orderType;
				this.hot = [];
				this.index = 0;
				this.Goods(this.indexx, this.orderType);
			},
			//轮播图
			banners: function(id, value, linkType) {
				if(linkType == 'h5') {
					window.location.href = value
				} else {
					this.$router.push({
						path: '/activityPage?type=wap&activityId=' + id
					})
				}
			},
			yh: function(id) {
				this.yhcommodity(id);
			},
			//整点特卖
			specialgoods: function() {
				this.$router.push({
					path: '/integsale?typename=yh'
				})
			},

			//爆品查看更多
			todayhot: function() {
				this.$router.push({
					path: '/todayhot?type=yh'
				})
			},

			//商品分类
			classifyon: function(name, codeid) {
				if(name == '推荐') {
					this.show = true;
				} else {
					this.show = false;
				}
				this.codeid = codeid;
				this.goodsClassify = [];
				this.indexx = 0;
				this.keyword = name;
				this.Goods(this.indexx);
			},
			//分类商品
			Goods(indexx, orderType) {
				this.Loading = true;
				var Url = BaseUrl + "goods/list?type=yh&length=10&categoryCode=" + this.codeid + '&start=' + this.indexx + '&orderType=' + this.orderType;
				this.$http.get(Url).then(res => {
					if(res.data.code == "10000") {
						this.Loading = false;
						this.goodsClassify = this.goodsClassify.concat(res.data.data.list);
						if(res.data.data.isMore == "none") {
							this.loadings = true;
							Toast({
								message: "没有更多的数据",
								position: 'middle',
								duration: 1000
							})
							return;
						} else if(res.data.data.isMore == "have") {
							this.loadings = false;
							this.indexx++;
						}
					}
				}).catch(error => {
					this.Loading = false;
					Toast({
						message: "网络异常",
						position: 'middle',
						duration: 3000
					})
				})
			},
			classifygoods() {
				this.loadings = this.loadings;
				if(this.loadings == false) {
					setTimeout(() => {
						this.Goods(this.indexx);
						this.loadings = this.loadings;
					}, 100);
				}

			},
			singInfo(index) {
				this.Loading = true;
				//为你精选
				var Url = BaseUrl + "goods/list?type=yh&length=10&categoryCode=" + this.codeid + '&start=' + this.index + '&orderType=' + "";
				this.$http.get(Url).then(res => {
					if(res.data.code == "10000") {
						this.Loading = false;
						this.jing = this.jing.concat(res.data.data.list)
						if(res.data.data.isMore == "none") {
							this.loading = true;
							Toast({
								message: "没有更多的数据",
								position: 'middle',
								duration: 1000
							})
							return;
						} else if(res.data.data.isMore == "have") {
							this.loading = false;
							this.index++;
						}
					}

				}).catch(error => {
					this.Loading = false;
					Toast({
						message: "网络异常",
						position: 'middle',
						duration: 3000
					})
				})
			},
			loadMore() {
				this.loading = this.loading;
				if(this.loading == false) {
					setTimeout(() => {
						this.singInfo(this.index);
						this.loading = this.loading;
					}, 100);
				}
			},

		}
	}
</script>

<style scoped="scoped">
	.template {
		width: 100%;
		height: 100%;
		/*background: rgba(0,0,0,0.5);*/
		position: absolute;
		z-index: 99;
	}
	
	.template div {
		position: absolute;
		top: 5.5rem;
		left: 50%;
		margin-left: -0.6rem;
	}
	
	.navigation {
		height: 1rem;
		background: #fff;
		display: flex;
		border-bottom: 1px solid #dcd2d1;
		justify-content: space-between;
		align-items: center;
		padding: 0 0.24rem;
		z-index: 999;
	}
	
	.navigation div:nth-child(1) img {
		width: 0.2rem;
		height: 0.36rem;
		display: block;
	}
	
	.navigation div:nth-child(2) {
		color: #ff2040;
	}
	
	.navigation div:nth-child(3) img {
		width: 0.4rem;
		height: 0.4rem;
		display: block;
	}
	
	.aui-header {
		height: 1rem;
		border-bottom: 1px solid #ccc;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 0.24rem;
	}
	
	.aui-header img {
		width: 0.2rem;
		height: 0.36rem;
		display: block;
	}
	/**菜单***/
	
	.menulist {
		width: 100%;
		height: 0.9rem;
		background-color: #fff;
		margin-top: 1rem;
		overflow-x: auto;
		position: fixed;
		z-index: 999;
		border-bottom: 1px solid #CCCCCC;
	}
	
	.menulist-ul {
		height: 0.88rem;
		display: flex;
	}
	
	.samemenu-li {
		padding: 0.2rem;
		display: block;
	}
	
	.on {
		padding: 0.2rem;
		display: block;
		color: #ff2040;
		border-bottom: 1px solid #ff2040;
	}
	
	.more {
		width: 0.88rem;
		height: 0.88rem;
		z-index: 9;
		line-height: 0.88rem;
		background: #fff;
		text-align: center;
		border-left: 1px solid #ccc;
		position: fixed;
		top: 1rem;
		right: 0;
		border-bottom: 1px solid #CCCCCC;
	}
	
	.more img {
		width: 0.39rem;
		height: 0.21rem;
	}
	
	.goodsclassify {
		padding: 0 0.25rem;
		background: #f2f2f2;
		position: absolute;
		top: 1.9rem;
		left: 0;
		z-index: 9;
	}
	
	.goodsclassify_s {
		padding: 0.05rem 0.05rem;
		border: 1px solid #919191;
		color: #919191;
		font-size: 0.2rem;
		display: inline-block;
		margin: 0.05rem;
		border-radius: 0.1rem;
	}
	
	.ons {
		padding: 0.05rem 0.05rem;
		border: 1px solid #ff2040;
		color: #ff2040;
		font-size: 0.2rem;
		display: inline-block;
		margin: 0.05rem;
		border-radius: 0.1rem;
	}
	/*详情*/
	
	.recommend {
		background: #fafafa;
		padding-top: 1.9rem;
	}
	/*轮播*/
	
	.banner {
		width: 100%;
		height: 2.6rem;
	}
	
	.banner img {
		width: 100%;
	}
	/*活动标题*/
	
	.activityTitle {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0.2rem 0.2rem;
		border-bottom: 1px solid #efefef;
		background: #fff;
	}
	
	.activityTitle div:nth-child(1) {
		font-size: 0.3rem;
		color: #ff2040;
	}
	
	.activityTitle div:nth-child(1) img {
		width: 0.36rem;
		height: 0.3rem;
		margin-right: 0.2rem;
		position: relative;
		top: 0.05rem;
	}
	
	.activityTitle div:nth-child(2) {
		font-size: 0.2rem;
		color: #afafaf;
	}
	/*整点特卖*/
	
	.special {
		box-sizing: border-box;
		overflow: hidden;
	}
	
	.specialList {
		width: 33.3%;
		height: 4.1rem;
		border-bottom: 1px solid #efefef;
		border-right: 1px solid #efefef;
		padding: 0.2rem;
		float: left;
		background: #fff;
	}
	
	.specialImg {
		width: 100%;
		height: 2.5rem;
		margin-bottom: 0.2rem;
	}
	
	.specialImg img {
		width: 100%;
		height: 100%;
	}
	
	.specialName {
		height: 0.55rem;
		display: -webkit-inline-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
		color: #3d3d3d;
		font-size: 0.26rem;
		line-height: 1.2;
	}
	
	.specialPrice {
		display: flex;
		justify-content: space-between;
	}
	
	.specialPrice div:nth-child(1) {
		color: #a0a0a0;
		font-size: 0.2rem;
		text-decoration: line-through;
	}
	
	.specialPrice div:nth-child(2) {
		color: #ff2040;
		font-size: 0.28rem;
	}
	
	.examine {
		text-align: center;
		color: #969696;
		font-size: 0.26rem;
		background: #FFF;
		padding: 0.2rem 0;
		margin-bottom: 0.2rem;
	}
	/*爆品*/
	
	.hotD {
		width: 100%;
		overflow-x: auto;
	}
	
	.hot {
		/*width: 32rem;*/
		display: flex;
		overflow-x: auto;
	}
	
	.hotlist {
		width: 3.1rem;
		/*height: 5.4rem;*/
		padding: 0.2rem;
		background: #FFF;
		margin-right: 0.1rem;
	}
	
	.hotImg {
		width: 100%;
		height: 2.5rem;
		margin-bottom: 0.1rem;
	}
	
	.hotImg img {
		width: 100%;
		height: 2.5rem;
	}
	
	.hotName {
		height: 0.6rem;
		display: -webkit-inline-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
		line-height: 1.2;
		color: #575757;
		font-size: 0.26rem;
	}
	
	.hotName img {
		width: 0.7rem;
		height: 0.3rem;
	}
	
	.hotPrice {
		display: flex;
		font-size: 0.2rem;
	}
	
	.hotPrice div:nth-child(1) {
		color: #9a9a9a;
		text-decoration: line-through;
		margin-right: 0.1rem;
	}
	
	.hotPrice div:nth-child(2) {
		color: #ff2040;
	}
	
	.cashPrice {
		font-size: 0.26rem;
		color: #ff2040;
		font-weight: bold;
		margin: 0.1rem 0 0.1rem 0;
	}
	
	.rob {
		background: #FF2040;
		border-radius: 0.1rem;
		text-align: center;
		padding: 0.1rem 0;
		color: #fff;
	}
	/*精选*/
	
	.handpick {
		width: 100%;
	}
	
	.handpick img {
		width: 100%;
		display: block;
	}
	
	.jing {
		/*overflow: hidden;*/
		box-sizing: border-box;
	}
	
	.jing ul {
		/*height: 15.56rem;*/
		overflow: hidden;
	}
	
	.handpicklist {
		width: 48.5%;
		background: #FFF;
		float: left;
		margin-top: 0.2rem;
		margin-right: 0.1rem;
	}
	
	.handpicklist:nth-child(even) {
		margin-right: 0;
	}
	
	.handpickImg {
		width: 100%;
		height: 3.2rem;
		margin-bottom: 0.1rem;
	}
	
	.handpickImg img {
		width: 100%;
		height: 3.2rem;
	}
	
	.handpickName {
		margin: 0 0.2rem;
		height: 0.65rem;
		display: -webkit-inline-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
		line-height: 1.2;
		color: #575757;
		font-size: 0.26rem;
	}
	
	.handpickName img {
		width: 0.7rem;
		height: 0.3rem;
	}
	
	.handpickPrice {
		margin: 0 0.2rem;
		display: flex;
		font-size: 0.2rem;
	}
	
	.handpickPrice div:nth-child(1) {
		color: #9a9a9a;
		text-decoration: line-through;
		margin-right: 0.1rem;
	}
	
	.handpickPrice div:nth-child(2) {
		color: #ff2040;
	}
	
	.cashPrice {
		margin: 0.2rem 0.2rem;
		display: flex;
		justify-content: space-between;
		font-size: 0.26rem;
	}
	
	.cashPrice div:nth-child(1) {
		color: #ff2040;
		text-decoration: line-through;
		margin-right: 0.1rem;
		font-weight: bold;
	}
	
	.cashPrice div:nth-child(2) {
		color: #9a9a9a;
	}
	
	.immediately {
		margin: 0 0.2rem;
		border-radius: 0.4rem;
		text-align: center;
		padding: 0.1rem 0;
		background: #ff2040;
		color: #fff;
		margin-bottom: 0.2rem;
	}
	
	.yhSymbol {
		width: 0.67rem;
		height: 0.67rem;
		background: url(../assets/yh.png);
		background-size: 100% 100%;
		display: block;
		position: relative;
		margin-top: -0.8rem;
		float: right;
	}
	/*选择商品*/
	
	.classifyTitle {
		padding-top: 1.9rem;
	}
	
	.type {
		width: 100%;
		height: 1rem;
		background: #fff;
		display: flex;
		justify-content: space-around;
		align-items: center;
		position: fixed;
	}
	
	.type div {
		color: #6f6f6f;
		font-size: 0.2rem;
	}
	
	.type img {
		width: 0.2rem;
		height: 0.15rem;
		margin-left: 0.1rem;
	}
	
	.sellType {
		width: 100%;
		padding: 0 0.2rem;
		background: #fff;
		color: #6f6f6f;
		font-size: 0.36rem;
		position: absolute;
		top: 2.9rem;
	}
	
	.sellType div {
		padding: 0.1rem 0;
		border-bottom: 1px solid #ccc;
	}
	
	.merchandise ul {
		height: 12rem;
		overflow-y: auto;
		margin-top: 1rem;
		padding-bottom: 2rem;
	}
	
	.commoditylist {
		width: 48%;
		float: left;
		margin-right: 0.1rem;
	}
	
	.commoditylist:nth-child(even) {
		margin-right: 0;
	}
	
	.commodityImg {
		width: 100%;
		height: 3.2rem;
		margin-bottom: 0.1rem;
	}
	
	.commodityImg img {
		width: 100%;
		height: 3.2rem;
	}
	
	.commodityname {
		height: 0.65rem;
		display: -webkit-inline-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
		color: #878787;
		font-size: 0.26rem;
		line-height: 1.2;
		padding: 0 0.2rem;
	}
	
	.commodityname img {
		width: 0.7rem;
		height: 0.3rem;
	}
	
	.commodityoriginal {
		display: flex;
		font-size: 0.2rem;
		margin: 0 0.2rem;
	}
	
	.commodityoriginal div:nth-child(1) {
		color: #9a9a9a;
		text-decoration: line-through;
		margin-right: 0.1rem;
	}
	
	.commodityoriginal div:nth-child(2) {
		color: #ff2040;
	}
	
	.commoditycash {
		font-size: 0.26rem;
		margin: 0.1rem 0 0.1rem 0;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin: 0.1rem 0.2rem;
	}
	
	.commoditycash div:nth-child(1) {
		color: #ff2040;
		font-weight: bold;
	}
	
	.commoditycash div:nth-child(2) {
		color: #878787;
	}
</style>